import React, { PureComponent } from 'react';
import { connect } from 'react-redux';

import Container from '@icedesign/container';
import { Grid } from '@alifd/next';

const { Row, Col } = Grid;
//格式化日期
Date.prototype.Format = function (fmt) {
  var o = {
    "y+": this.getFullYear(),
    "M+": this.getMonth() + 1,                 //月份
    "d+": this.getDate(),                    //日
    "h+": this.getHours(),                   //小时
    "m+": this.getMinutes(),                 //分
    "s+": this.getSeconds(),                 //秒
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
    "S+": this.getMilliseconds()             //毫秒
  };
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)){
      if(k == "y+"){
        fmt = fmt.replace(RegExp.$1, ("" + o[k]).substr(4 - RegExp.$1.length));
      }
      else if(k=="S+"){
        var lens = RegExp.$1.length;
        lens = lens==1?3:lens;
        fmt = fmt.replace(RegExp.$1, ("00" + o[k]).substr(("" + o[k]).length - 1,lens));
      }
      else{
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
  }
  return fmt;
}

class AccountBadge extends PureComponent {
  render() {
    const { userData } = this.props;
    let date = new Date(userData.createTime);

    return (
      <Container>
        <div style={styles.header}>
          <h2 style={{ margin: 0, fontSize: '16px' }}>账号经验</h2>
        </div>
        <Row wrap style={styles.wrap}>
          <Col style={styles.col} l={3} s={4} xxs={24}>
            <div style={styles.cover}>
              <img style={styles.img} src={require('./images/experience.png')} alt="experience" />
            </div>
          </Col>
          <Col style={styles.col} l={11} s={10} xxs={24}>
            <h3 style={styles.title}>账号经验</h3>
            <div style={styles.desc}>账号经验值可用来抵扣浏览券等</div>
          </Col>
          <Col style={styles.col} l={4} s={4} xxs={24}>
            <div style={styles.status}>当前经验值：{userData.userExperience == undefined ? '暂无经验值' : userData.userExperience + '分'}</div>
          </Col>
          <Col style={styles.col} l={6} s={6} xxs={24}>
            <div style={styles.desc}>加入时间：{date.Format("yyyy年MM月dd日 hh:mm:ss")}</div>
          </Col>
        </Row>
      </Container>
    );
  }
}

const styles = {
  header: {
    fontSize: 16,
  },
  wrap: {
    paddingTop: '20px',
    alignItems: 'center',
    borderBottom: '1px solid #f4f4f4',
  },
  col: {
    margin: '0 0 20px 0',
  },
  img: {
    width: '80px',
    height: '80px',
    display: 'block',
  },
  status: {
    textAlign: 'center',
    color: '#999',
    fontSize: '12px',
  },
  title: {
    margin: '0px',
    fontSize: '16px',
  },
  desc: {
    fontSize: '12px',
    color: '#999',
    lineHeight: '20px',
  },
};

const mapState = (state) => ({
  userData: state.getIn(['center', 'userData']).toJS()
});

export default connect(mapState, null)(AccountBadge);